<script>
import { api } from '@/api';
import { useAppStore } from '@/stores/app';
import { mapStores } from 'pinia'
import { Badge, Button, Dialog, SwipeCell, Toast } from 'vant';

export default {
  components: {
    Badge,
    SwipeCell,
    Button
  },
  computed: {
    ...mapStores(useAppStore)
  },
  data() {
    return {
    }
  },
  created() {
    this.appStore.refreshSessionList()
  },
  methods: {
    async handleRemoveSession(id) {
      const confirm = await Dialog.confirm({
        title: '提示',
        message: '确定删除该会话吗？'
      }).catch(() => {})

      if (confirm !== 'confirm') return

      const { success } = await api.chat.removeSession({ con_id: id })
      if (success) {
        this.appStore.refreshSessionList()
        Toast.success({ message: '删除成功' })
      } else {
        Toast.fail({ message: '删除失败' })
      }
    },
  },
}
</script>

<template>
  <div class="message-view">
    <div v-if="!appStore.sessionList.length" class="message-empty">暂无消息</div>
    
    <SwipeCell
      v-for="item in appStore.sessionList"
      :key="item.id"
    >
      <div class="message-item" @click="$router.push({ path: `/chat/${item.friend_name}`, query: { name: item.groupInfo?.Name ?? item.nickName } })">
        <Badge :content="item.unread > 0 ? item.unread : undefined" :max="99">
          <img class="message-avatar" :src="item.groupInfo?.avatar_url ?? item.avatar_url" alt="">
        </Badge>
  
        <div class="message-info">
          <div class="message-header">
            <div class="message-name">{{ item.groupInfo?.Name ?? item.nickName }}</div>
            <div v-if="item.lastMsg.length > 0" class="message-last-message">
              <div v-if="item.lastMsg[0].content_type === 'text'" v-html="item.lastMsg[0].msg"></div>
              <span v-else-if="item.lastMsg[0].content_type === 'image'">[图片]</span>
              <span v-else-if="item.lastMsg[0].content_type === 'red-envelope'">[红包]</span>
              <span v-else-if="item.lastMsg[0].content_type === 'voice'">[语音消息]</span>
            </div>
          </div>
  
          <div v-if="item.lastMsg.length > 0" class="message-date">{{ item.lastMsg[0].update_time }}</div>
        </div>
      </div>

      <template #right>
        <Button style="height: 100%;" square type="danger" text="删除" @click="handleRemoveSession(item.id)" />
      </template>
    </SwipeCell>
  </div>
</template>

<style lang="less" scoped>
.message-view {
  height: 100%;
  
  .message-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
  }

  .message-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;

    &:not(:last-child) {
      border-bottom: 1px solid #f0f0f0;
    }
  }

  .message-avatar {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
  }

  .message-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    flex: 1;
    gap: 10px;
  }

  .message-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    overflow: hidden;
    height: 100%;
    gap: 8px;
  }

  .message-name {
    flex: 1;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 0;
    font-size: 1.2em;
  }

  /deep/.message-last-message {
    color: #999;
    font-size: 0.92em;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;

    img {
      width: auto;
      height: 100%;
    }
  }

  .message-date {
    flex-shrink: 0;
    font-size: 0.85em;
    color: #999;
  }
}
</style>
